<!-- 登录 -->
<template>
    <div id="login_box">
        <div class="box">
            <el-form ref="formRef" :model="info" label-width="60px">
                <el-form-item label="用户名">
                    <el-input v-model.trim="info.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input autocomplete="new-password" show-password v-model.trim="info.password"></el-input>
                </el-form-item>
            </el-form>
            <el-button class="btn" type="primary" @click="submit">登录</el-button>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
    data() {
        return {
            info: {
                username: '',
                password: '',
            }
        };
    },
    computed: {
        ...mapState('extends/user', ['userInfo'])
    },
    methods: {
        ...mapActions('extends/user', ['login']),

        // 登录
        submit() {
            // 调用登录接口
            this.login(this.info).then(res => {
                this.$message({ message: res, type: 'success' });
                // 跳转路由
                this.$router.push({ path: '/index' })
            }).catch(err => {
                this.$message({ message: err, type: 'error' });
            })
        },

    }
}

</script>
<style lang='less' scoped>
#login_box {
    width: 100vw;
    height: 100vh;
    background: url('../../assets/login_bg.jpg') no-repeat center fixed;
    background-size: cover;
    overflow: hidden;

    .box {
        width: 400px;
        border: 1px solid #FFF;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, .1);
        padding: 20px;
        margin: 20% auto 0 auto;

        /deep/.el-form-item__label {
            color: #FFF;
        }

        .btn {
            display: block;
            margin: 0 auto;
        }
    }
}
</style>